<template>
  <div class="capsule">
    <el-avatar class="capsule-avatar" :size="30" :src="src" />
    <span class="capsule-name"><slot></slot></span>
  </div>
</template>

<script>
export default {
  props: {
    'src': {
      default: ''
    },
  }
}
</script>

<style scoped>
.capsule {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 100px;
  padding: 8px;
  margin: 6px;
  transition: background-color 0.3s;
}

.capsule:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.capsule-avatar {
  margin-right: 8px;
}

.capsule-name {
  padding-right: 8px;
  font-size: 15px;
}
</style>
